<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>寻健康达人，为山东鼓劲</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="css/weui.min.css" />
    <style type="text/css">
      .mui-scroll-wrapper {
         top:120px;
         margin-bottom:50px;
       }
    </style>
    <script type="text/javascript" src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
    
    mui.init({
      gestureConfig:{
        hold:true,
        release:true
      }
    });
    mui.ready(function(){
      mui(".mui-scroll-wrapper").scroll();
      mui(".mui-scroll-wrapper")[0].addEventListener('hold', function(){
        //alert("hold");
        swiper.noSwiping = true;

      });
      mui(".mui-scroll-wrapper")[0].addEventListener('release', function(){
        //alert("release");
        swiper.noSwiping = false;
      });
      mui(".mui-scroll-wrapper").scroll();
    });
    // key of lastCode that stored in cookie
    var COOCKIE_KEY_LAST_CODE = 'lastCode';
    // the object to store userInfo
    var userInfoObj = null;
    var candidate = null;
    var candidateObj = null;
    var canVote = true;
    
    var redirectToOauth = function () {
      //location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8be05afa2161d315&redirect_uri=' + location.href + '&response_type=code&scope=snsapi_userinfo&state=success#wechat_redirect';
    };

    var redirectToIndex = function () {
      //location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8be05afa2161d315&redirect_uri=http://www.imdcfz.com&response_type=code&scope=snsapi_userinfo&state=success#wechat_redirect';
    };
    
    (function () {
      // check if url contain code
      var search = location.search;
      search && search.length && (search = search.substring(1));
      var code = null;
      candidate = null;
      var params = search.split('&');
      params.forEach(function (param) {
        var keyVal = param.split('=');
        if (!keyVal || !keyVal.length) return;
        if (keyVal[0].toLowerCase() == 'code') {
          code = keyVal.length == 1 ? '' : keyVal[1];
        } else if (keyVal[0].toLowerCase() == 'candidate') {
          candidate = keyVal.length == 1 ? '' : keyVal[1];
        }
      });
      
      if (!candidate) {
        // no candidate found, redirect to index page
        redirectToIndex();
      }

      if (!!code) {
        // found code
        // if the code has used before, redirect
        var codeCookies = utils.getCookies(COOCKIE_KEY_LAST_CODE);
        if (codeCookies && codeCookies.length) {
          if (code == codeCookies[0]) {
            // has used before
            redirectToOauth();
            return;
          } else {
            // update the lastCode
            utils.deleteCookie(COOCKIE_KEY_LAST_CODE);
            utils.setCookie(COOCKIE_KEY_LAST_CODE, code, 30);
          }
        } else {
         // no history code found, update the lastCode
          utils.deleteCookie(COOCKIE_KEY_LAST_CODE);
          utils.setCookie(COOCKIE_KEY_LAST_CODE, code, 30);
        }
        // else, is a new code, try to get userinfo
        $.ajax({
          method: 'get',
          url: 'userinfo',
          data: { code: code },
          success: function (data) {
            try {
              var dataObj = JSON.parse(data);
              if (dataObj.code == 0) {
                // success get user info
              var bodyObj = dataObj.body;
                userInfoObj = {};
                Object.keys(bodyObj).forEach(function (key) {
                  userInfoObj[key] = bodyObj[key];
                });
                getCandidateInfo();
              } else {
                if (dataObj.body && dataObj.body.errcode && dataObj.body.errcode == 40029) {
                  // if invalid code, redirect
                  redirectToOauth();
                } else {
                  errToast($('#err-toast'), $('#err-toast-content'), dataObj.msg);
                }
              }
            } catch (e) {
              errToast($('#err-toast'), $('#err-toast-content'), JSON.stringify(e));
            }
          },
          error: function (data, textStatus) {
            errToast($('#err-toast'), $('#err-toast-content'), textStatus || data.statusText);
          }
        });
     // get config for wechat js api
        $.ajax({
          type: 'get',
          url: 'config',
          data: { url: location.href ? location.href.split('#')[0] : '' },
          success: function (data) {
            try {
              var dataObj = JSON.parse(data);
              if (dataObj.code == 0 && dataObj.body) {
                var dataBody = dataObj.body;
                wx.config({
                  debug: false,
                  appId: dataBody.appId,
                  timestamp: dataBody.timestamp,
                  nonceStr: dataBody.nonceStr,
                  signature: dataBody.signature,
                  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
                });
                $('#info-share-button') && $('#info-share-button').click(function () {
                  showShareWrapper();
                });
              } else {
                errToast($('#err-toast'), $('#err-toast-content'), dataObj.msg);
              }
            } catch (e) {
              errToast($('#err-toast'), $('#err-toast-content'), JSON.stringify(e));
            }
          },
          error: function (data, textStatus) {
            errToast($('#err-toast'), $('#err-toast-content'), textStatus || data.statusText);
          }
        });
      } else {
        // no code found, redirect to authorize page
        redirectToOauth();
      }
    })();
    
    wx.ready(function () {
      wx.onMenuShareTimeline({
        title: '寻健康达人 为山东鼓劲',
        desc: '寻健康达人，为山东鼓劲',
        link: 'http://www.imdcfz.com',       
        imgUrl: 'http://www.imdcfz.com/img/lucky-share-default.png',
        cancel: function () {
          errToast($('#err-toast'), $('#err-toast-content'), '取消分享');
        },
        fail: function () {
          errToast($('#err-toast'), $('#err-toast-content'), '分享失败');
        },
        trigger: function () {
          //$('#share-wrapper').hide();
        }
      });
      
      wx.onMenuShareAppMessage({
        title: '寻健康达人 为山东鼓劲',
        desc: '寻健康达人，为山东鼓劲',
        link: 'http://www.imdcfz.com',       
        imgUrl: 'http://www.imdcfz.com/img/lucky-share-default.png',
        cancel: function () { 
          errToast($('#err-toast'), $('#err-toast-content'), '取消分享');
        },
        fail: function () {
          errToast($('#err-toast'), $('#err-toast-content'), '分享失败');
        },
        trigger: function () {
          //$('#share-wrapper').hide();
        }
      });
    });
    
    var getCandidateInfo = function () {
      if (!candidate) return;
      $.ajax({
        type: 'get',
        url: 'candidate',
        data: { candidate : candidate },
        success: function (data) {
          try {
            var dataObj = JSON.parse(data);
            if (dataObj.code == 0) {
              // success get candidate info
            var bodyObj = dataObj.body;
              candidateObj = {};
              Object.keys(bodyObj).forEach(function (key) {
                candidateObj[key] = bodyObj[key];
              });
              // update userInfo
              updateCandidateInfo();
            } else {
              errToast($('#err-toast'), $('#err-toast-content'), dataObj.msg);
              if (dataObj.body) {
                if (dataObj.body.noCandidate) {
                  // no openid found, or not registered
                  // redirect to oauth page and then redirect to index page
                  setTimeout(redirectToIndex, 2000);
                }
              }
            }
          } catch (e) {
            errToast($('#err-toast'), $('#err-toast-content'), JSON.stringify(e));
          }
        },
        error: function (data, textStatus) {
          errToast($('#err-toast'), $('#err-toast-content'), textStatus || data.statusText);
        }
      });
    };
    
    var updateCandidateInfo = function () {
      if (!candidateObj) return;
      candidateObj.avatar && $('#lucky-info-avatar') && $('#lucky-info-avatar').attr('src', candidateObj.avatar);
      candidateObj.tag && $('#user-tag') && $('#user-tag').html(TAGS[candidateObj.tag]);
      //console.log("tag = "+candidateObj.tag);
      candidateObj.userName && $('#candidate-name') && $('#candidate-name').html(candidateObj.userName);
      $('#candidate-total') && $('#candidate-total').html(candidateObj.support + '票');
      $('#candidate-rank') && $('#candidate-rank').html('第' + (candidateObj.rank + 1) + '名');
      //console.log("tag desc = "+TAGS_PLUS_COMMENTS[candidateObj.tag]);
      $('#tag-desc') && $('#tag-desc').html(TAG_COMMENTS[candidateObj.tag]);
    };
    
    $(function () {
      $('#support-button') && $('#support-button').click(function (event) {
        if (!canVote) {
          errToast($('#err-toast'), $('#err-toast-content'), '每天只能鼓三次劲哦~ 欢迎明天再来~');
          return;
        }
        if (!candidate || !userInfoObj) {
          errToast($('#err-toast'), $('#err-toast-content'), '缺少被支持者信息或支持者信息');
          // return;
        }
        $.ajax({
          type: 'get',
          url: 'support',
          data: { candidate : candidate, supporter : userInfoObj.openid },
          success: function (data) {
            try {
              var dataObj = JSON.parse(data);
              if (dataObj.code == 0) {
                // success to vote
                // update data and content, show an animation
                $('#support-hand').addClass('active');
                candidateObj.support += 1;
                $('#candidate-total') && $('#candidate-total').html(candidateObj.support + '票');
                setTimeout(function () {
                  $('#support-hand').removeClass('active');
                }, 500);
              } else {
                errToast($('#err-toast'), $('#err-toast-content'), dataObj.msg);
                if (dataObj.body && dataObj.body.exceed) {
                  // cannot vote any more (today)
                  canVote = false;
                }
              }
            } catch (e) {
              errToast($('#err-toast'), $('#err-toast-content'), JSON.stringify(e));
            }
          },
          error: function (data, textStatus) {
            errToast($('#err-toast'), $('#err-toast-content'), textStatus || data.statusText);
          }
        });
      });
    });
    
    var initSupportPage = function () {
      initCitiesScroll();
      ajaxGet(1);
    };
    
    
    </script>
  </head>

  <body onload="initSupportPage()">
    <!-- 音乐播放按钮 -->
    <div class='off rotate' id='audio_btn' style='display:block;' onclick="playorPause()">
      <audio id='media' src="http://www.imdcfz.com/sound/bgsound.mp3" preload=""
      autoplay="" loop=""></audio>
    </div>
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide result" id="result-7">
          <div id="lucky-info-wrapper">
            <img src="img/support-title.png" id="lucky-info-title"/>
            <div class="user-info-avatar-wrapper">
              <div class="user-info-avatar-inline-wrapper">
                <img src="img/lucky-info-default-avatar.png" id="lucky-info-avatar" />
                <img src="img/lucky-info-avatar-icon.png" id="lucky-info-avatar-icon" />
                <label id="user-tag" class='user-tag-label' style="float:right; margin-left:70px;">健身大咖</label>
              </div>
            </div>
          </div>
          <div id="register-wrapper">
            <div class="support-wrapper">
              <div class="candidate-basic-info-wrapper">
                <div class="candidate-name-wrapper">姓名：<span id="candidate-name"></span></div>
                <div>累计票数：<span id="candidate-total"></span></div>
                <div>投票排名：<span id="candidate-rank"></span></div>
              </div>
              <div class="support-slogan-wrapper ">
                <img src="img/support-slogan-blank.png" class="support-slogan"/>
                <label id='tag-desc' class='user-tag-desc'>跑步呢，速度不重要，为健康，跑起来，越跑越开心</label>
              </div>
              <img src="img/support-hand.png" class="support-hand" id="support-hand"/>
              <div class="support-buttons-wrapper">
                <a class="btn" id="support-button">投票鼓劲</a>
                <a class="btn" id="sign-up-button" href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8be05afa2161d315&redirect_uri=http://www.imdcfz.com&response_type=code&scope=snsapi_userinfo&state=success#wechat_redirect">参与报名</a>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide result" id="result-8">
          <div id="rank-top-wrapper">
            <div id="rank-title-wrapper">
              <div class="rank-btns-wrapper"><a class="btn active">健康达人</a><a class="btn" onclick="jumpToNext()">齐鲁美食</a></div>
              <img src="img/rank-title.png" />
            </div>
              
            <!-- 可滚动区域 -->
            <div id="rank-wrapper" class='mui-scroll-wrapper swiper-no-swiping'>
              <div class = 'mui-scroll'>
                <div class="query-rank-wrapper"><input id="query-rank-input" /><a class="btn" id="query-rank-btn" onclick="ajaxGet(1)"></a></div>
                <div id="rank-result-wrapper">
                <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                        <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                   <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                     <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                   <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                     <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                  <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                        <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                   <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                     <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                   <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                     <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                  <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                        <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                   <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                     <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                   <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                     <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                  <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                        <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                   <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                     <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                   <div class="rank-result-item">
                     <div class="rank-result-avatar-wrapper">
                     <img src = "img/lucky-info-default-avatar.png" class="rank-result-avatar" />
                     </div>
                     <div class="rank-result-info-wrapper">
                        <div>姓名：哈哈</div>
                        <div>票数：12</div>
                        <div>排名：第1名</div>
                     </div>              
                  </div>
                  
                </div>
                </div>
                <div id="rank-result-pagination"></div>
              </div>
            </div>
          </div>
          <div id="rank-foot-wrapper"><img src="img/food-foot.png" /></div>
        </div>
        <div class="swiper-slide result" id="result-9">
          <div id="food-title-wrapper">
            <div class="rank-btns-wrapper"><a class="btn" onclick="jumpToPrev()">健康达人</a><a class="btn active">齐鲁美食</a></div>
            <img src="img/rank-title.png" />
          </div>
          <div id="cities-wrapper">
            <div id="cities-inner">
              <div class="prompt-area"><span>点击下方城市名称，寻找齐鲁美食</span></div>
              <a class="btn" onclick="showFoodOrderWrapper()">济南</a>
              <a class="btn">青岛</a>
              <a class="btn">菏泽</a>
              <a class="btn">临沂</a>
              <a class="btn">济宁</a>
              <a class="btn">烟台</a>
              <a class="btn">潍坊</a>
              <a class="btn">滨州</a>
              <a class="btn">淄博</a>
              <a class="btn">德州</a>
              <a class="btn">聊城</a>
              <a class="btn">东营</a>
              <a class="btn">泰安</a>
              <a class="btn">威海</a>
              <a class="btn">日照</a>
              <a class="btn">枣庄</a>
              <a class="btn">新泰</a>
              <a class="btn">莱芜</a>
              <a class="btn">海阳</a>
              <a class="btn">荣成</a>
              <a class="btn">博兴</a>
              <a class="btn">鱼台</a>
              <a class="btn">城阳</a>
              <a class="btn">济阳</a>
              <a class="btn">淄川</a>
              <a class="btn">滕州</a>
              <a class="btn">巨野</a>
              <a class="btn">单县</a>
              <a class="btn">郯城</a>
              <a class="btn">嘉祥</a>
              <a class="btn">兰陵</a>
              <a class="btn">寿光</a>
              <a class="btn">青州</a>
              <a class="btn">胶州</a>
              <a class="btn">黄岛</a>
              <a class="btn">岚山</a>
            </div>
          </div>
          <div id="food-order-wrapper">
            <div class="food-line" onclick="linkTo(0)">
              <img src="img/food-order.png"/>
            </div>
            <div class="food-line" onclick="linkTo(1)">
              <img src="img/food-order.png"/>
            </div>
          </div>
          <div id="food-foot-wrapper"><img src="img/food-root.png" /></div>
        </div>
      </div>
    </div>
    <!-- Error Toast -->
    <div id="err-toast" style="display:none;">
      <div class="weui_mask_transparent"></div>
      <div class="weui_toast">
        <i class="weui_icon_warn"></i>
        <p class="weui_toast_content" id="err-toast-content">错误</p>
      </div>
    </div>
    <!-- Success Toast -->
    <div id="success-toast" style="display:none;">
      <div class="weui_mask_transparent"></div>
      <div class="weui_toast">
        <i class="weui_icon_toast"></i>
        <p class="weui_toast_content" id="success-toast-content">成功</p>
      </div>
    </div>
    <script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      mousewheelControl: true,
      watchSlidesProgress: true,
    });
    </script>
  </body>
</html>